<template>
  <div>
    <el-table
      V-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="getRowClass"
      @selection-change="handleSelectionChange"
      @row-click="rowbtn"
      border
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" width="60px">
        <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>
      <el-table-column prop="business" label="业务"></el-table-column>
      <el-table-column prop="applicant" label="申请人"></el-table-column>
      <el-table-column label="申请时间">
        <template slot-scope="scope">{{ scope.row.startTime | TimeFilter }}</template>
      </el-table-column>

      <el-table-column prop="address" label="网点" show-overflow-tooltip></el-table-column>
      <el-table-column prop="enterprise" label="公司名称"></el-table-column>
      <el-table-column prop="phoneNum" label="联系电话"></el-table-column>
      <el-table-column prop="class" label="类别"></el-table-column>
      <el-table-column prop="userName" label="经办人"></el-table-column>
      <el-table-column prop="businessNum" label="业务办理数量"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="toal"
    ></el-pagination>
  </div>
</template>

<script>
import { getPagedata, outExcel } from "../../api/datastac";
import { mapMutations } from "vuex";
export default {
  name: "showTbale",
  props: ["tableData", "toal"],
  data() {
    return {
      currentPage1:1,
      loading: true,
      id: [],
      classId: [],
    };
  },
  methods: {
    ...mapMutations([
      "changePageSizeData",
      "changePageNumeData",
      "changePageToal",
      "setoutexcelId",
      "setoutexcelclassId",
    ]),
    // 表格第一行显示背景
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F7FA";
      } else {
        return "";
      }
    },
    //每页显示的条数
    handleSizeChange(val) {
      this.changePageSizeData(val);
      getPagedata(this.$store.state.pagedata)
        .then((res) => {
          this.$emit("changetable", res.data.data.list);
          this.getcertId(res.data.data.list);
        })
        .catch((error) => {});
    },
    // 页数切换
    handleCurrentChange(val) {
      this.changePageNumeData(val);
      getPagedata(this.$store.state.pagedata)
        .then((res) => {
          this.$emit("changetable", res.data.data.list);
          this.getcertId(res.data.data.list);
        })
        .catch((error) => {
          error;
        });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.getcertId(val);
    },

    getcertId(val) {
      this.id = [];
      this.classId = [];
      val.filter((item) => {
        this.id.push(item.certId);
        this.classId.push(item.classId);
      });
      this.setoutexcelId(this.id);
      this.setoutexcelclassId(this.classId);
    },
    // 单击某一行时选中
    rowbtn(val) {
      this.toggleSelection([val]);
    },


  },
};
</script>
<style lang="less" scoped>
</style>